<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试 jQuery</title>
    <script src="outjs.js">
    </script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<p>/*********************1-1*************************/</p>
<script>
    function changeTxt() {
        if ($("#h01").text() == "你好") {
            $("#h01").html("Hello jQuery")
        } else {
            $("#h01").html("你好")
        }
    }
</script>
<h1 id="h01"></h1>
<button type="button" onclick="changeTxt()">点击改变内容</button>


<!--<div ng-app="">
    <p>Name : <input type="text" ng-model="name"></p>
    <h1>Hello {{name}}</h1>
</div>-->

<p>/*********************2-0*************************/</p>
<div ng-app="myApp" ng-init="myName='John';myCol='lightblue'"
     ng-controller="myCtrl">
    <p>/*********************2-1(输入即时显示)*************************/</p>
    Name : <input type="text" ng-model="name">
    Hello {{name}}

    <p>/*********************2-2(初始化名称)*************************/</p>
    The name is <span ng-bind="myName"></span><br>
    My first expression: {{ 5 + 5 }}

    <p>/*********************2-3(调用controller)*************************/</p>

    First Name: <input type="text" ng-model="firstName"><br>
    Last Name: <input type="text" ng-model="lastName"><br>
    Full Name: {{firstName + " " + lastName}}
    <script>

        var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope) {
            $scope.firstName = "John";
            $scope.lastName = "Doe";
        });
    </script>

    <p>/*********************2-3(处理颜色)*************************/</p>
    <input style="background-color:{{myCol}}" ng-model="myCol">
    <p>/*********************2-4(处理颜色)*************************/</p>

</div>

<div id="vue_det">
    <h1>site : {{site}}</h1>
    <h1>url : {{url}}</h1>
    <h1>{{details()}}</h1>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#vue_det',
        data: {
            site: "菜鸟教程",
            url: "www.runoob.com",
            alexa: "10000"
        },
        methods: {
            details: function() {
                return  this.site + " - 学的不仅是技术，更是梦想！";
            }
        }
    })
</script>
<div id="app">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">反转字符串</button>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            message: 'Runoob!'
        },
        methods: {
            reverseMessage: function () {
                this.message = this.message.split('').reverse().join('')
            }
        }
    })
</script>
</body>
</html>